window.onload = function() {
    var img1 = document.getElementById('img1');
    var img2 = document.getElementById('img2');
    var file = document.getElementById('file');
    var width = document.body.clientWidth;
    var height = document.body.clientHeight - file.clientHeight;

    var demo = new Image();
    demo.onload = function(){
    	potoShow(demo);
    };
    demo.src = __inline('./test.png');

    file.addEventListener('change', getPoto, false);

    function getPoto(e) {
        var files = e.target.files || e.dataTransfer.files;
        var file = files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
            upImg = new Image();
            upImg.src = e.target.result;
            //upImg.crossOrigin = "Anonymous";
            var img = new Image();
            img.onload = function() {
                potoShow(img);
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }

    function potoShow(img) {
        var x = 0,
            y = 0,
            z = 0,
            r = 0,
            s = 1;

        var imgHeight = img.height;
        var imgWidth = img.width;

        var img_p = imgWidth / imgHeight;
        var poto_p = width / height;

        if (img_p > poto_p) {
            s = height / imgHeight;
        } else {
            s = width / imgWidth;
        }
        x = (-imgWidth * (1 - s) / 2);
        y = (-imgHeight * (1 - s) / 2);
        if (imgWidth * s < width) {
            x += (width - imgWidth * s) / 2;
        }
        if (imgHeight * s < height) {
            y += (height - imgHeight * s) / 2;
        }
        x += (width - imgWidth * s) / 2;
        y += (height - imgHeight * s) / 2;

        var minS = Math.min(width / 2 / imgWidth, height / 2 / imgHeight);

        var style = [];
        style.push(['translate3d(', x, 'px, ', y, 'px, ', z, 'px)'].join(''));
        style.push(['rotateZ(' + r + 'deg)'].join(''));
        style.push(['scale(' + s + ')'].join(''));
        img1.style.width = img.width + 'px';
        img1.style.height = img.height + 'px';
        img2.style.width = img.width + 'px';
        img2.style.height = img.height + 'px';
        img1.style.transform = style.join(' ');
        img2.style.transform = style.join(' ');
        img1.style.backgroundImage = 'url(' + img.src + ')';
        img2.style.backgroundImage = 'url(' + img.src + ')';

        new imconfig_touch(img1, {
            x: x,
            y: y,
            z: z,
            s: s,
            r: r,
            minS: minS
        });
        new imconfig_touch(img2, {
            x: x,
            y: y,
            z: z,
            s: s,
            r: r,
            minS: minS
        });
    }
};